<script setup lang="ts">
import {useRouter} from "vue-router";

let props = defineProps<{
  id: string,
  title?: string
  description?: string
  imageUrl?: string
}>();

let router = useRouter();
const handleClick = () => {
  router.push("/studyplan/" + props.id)
}
</script>

<template>
  <el-card class="simple-card" shadow="always" @click="handleClick">
    <div class="card-content">
      <div class="card-left">
        <img v-if="props.imageUrl" :src="props.imageUrl" class="card-image" alt="">
        <div class="card-info">
          <div class="card-title">{{ props.title }}</div>
          <div class="card-description">{{ props.description }}</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
:deep(.el-card__body) {
  padding: 8px;
}

.simple-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.3s ease;
}

.simple-card:hover {
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-image {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
}

.card-description {
  font-size: 12px;
  color: #52525299;
}
</style>
